<template>
  <div class="app-container">

    <el-button type="success" @click="dialogVisible = true">添加日志</el-button>
    <el-dialog title="添加日志" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="内容">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="修改日志" :visible.sync="dialogUpdateVisible" width="30%">
      <el-form ref="form" :model="updateForm" label-width="80px">
        <el-form-item label="内容">
          <el-input v-model="updateForm.content"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    >
      <el-table-column label="创建时间" prop="createAt"></el-table-column>
      <el-table-column label="内容" prop="content"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="totalPage"
      :current-page="currPage"
      @current-change="handleCurrentChange"
    ></el-pagination>


    
  </div>
</template>
<script>
import { getPageList,del,add,update } from "@/api/log";
import { formatTime } from "@/utils/dateformat";
import { Message } from 'element-ui'

export default {
  data() {
    return {
      tableData: [
      ],
      search: "",
      currPage: 0,
      totalPage: 0,
      pageSize: 10,
      dialogVisible: false,
      form:{},
      updateForm:{},
      dialogUpdateVisible:false
    };
  },
  created() {
    this.loadPage(1, this.pageSize);
  },
  methods: {
    loadPage(page, size) {
      getPageList(page, size).then((resp) => {
        this.currPage = resp.data.currPage;
        this.totalPage = resp.data.totalPage;
        this.tableData = resp.data.data;

        this.tableData.forEach((element) => {
          element.createAt = formatTime(element.createAt / 1000);
        });

        console.log(JSON.stringify(resp));
      });
    },
    handleCurrentChange(currP) {
      console.log(`当前页: ${currP}`);
      this.loadPage(currP,this.pageSize)
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.updateForm =  JSON.parse(JSON.stringify(row))
      this.dialogUpdateVisible = true
    },
    handleDelete(index, row) {
      console.log(index, row);
      del(row.id).then(resp => {
        Message({
          message: '删除成功',
          type: 'success',
          duration: 1 * 1000
        })
        this.loadPage(this.currPage,this.pageSize)
      })
    },
    handleSubmit() {
      console.log(JSON.stringify(this.form));
      add(this.form.content).then( resp => {
        this.dialogVisible = false
         Message({
          message: '添加成功',
          type: 'success',
          duration: 1 * 1000
        })
        this.loadPage(this.currPage,this.pageSize)
        this.form = {}
      })
    },
    handleUpdateSubmit(){
      console.log(JSON.stringify(this.updateForm));

      update(this.updateForm.id,this.updateForm.content).then(resp => {

        this.dialogUpdateVisible = false
         Message({
          message: '修改成功',
          type: 'success',
          duration: 1 * 1000
        })
        this.loadPage(this.currPage,this.pageSize)
      
      })
    }
  },
};
</script>